<html>
<title>正则表达式练习器</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<head>
	<style type="text/css">
		body
		{
			background-color:#ddd;
		}
		#a
		{
			position:absolute;
			height:100px;
			left:50%;
			top:300px;
			transform:translate(-50%,0px);
			font-size:100px;
			line-height:100px;
			text-align:center;
			font-family:微软雅黑;
			padding:40px;
			border-radius:50px;
			background-color:#00cc47;
			color:#fff;
			transition:all 0.5s;
		}
		#a:hover
		{
			background-color:#00e44f;
		}
		.in
		{
			position:absolute;
			left:50%;
			transform:translate(-50%,-50%);
			border:none;
			outline:none;
			width:1000px;
			height:100px;
			background-color:#fff;
			border-radius:10px;
			padding:30px;
			font-size:40px;
			font-family:微软雅黑;
		}
	</style>
	<script>
		function result()
		{
			var i=document.getElementById("str").value;
			var re=eval(document.getElementById("re").value);
			if (i.match(re)==null || i.match(re)=="")
			{
				document.getElementById("a").innerHTML="···";
				document.getElementById("a").style.backgroundColor="#ff2a00";
			}
			else
			{
				document.getElementById("a").innerHTML=i.match(re);
				document.getElementById("a").style.backgroundColor="#00cc47";
			}
		}
	</script>
</head>
<body>
	<div style="position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:1000px;height:400px;">
		<nobr><div id="a">result</div></nobr>
		<input type="text" id="str" class="in" style="top:0px" onchange="result()" onpropertychange="result()" oninput="result()">
		<input type="text" id="re" class="in" style="top:150px" onchange="result()" onpropertychange="result()" oninput="result()">
	</div>
</body>
</html>